<template>
    <div class="toback">
        <van-icon name="arrow-left" size=".6rem" color="#ccc" @click="toback" />
    </div>
    <div class="switch">
        <div class="imgs">
            <img src="../../public/image/护理-1.png" alt="">
        </div>
        <!-- 内容 -->
        <div class="detail_con flex1">
            <span>{{ detail.forceValue }}倍算</span>
            <div><van-icon name="like-o" color="red" size=".7rem" /></div>
        </div>
        <div class="txt">{{ detail.title }}</div>
        <div class="sales flex">
            <p>快递包邮</p>
            <p>月销：{{ detail.price }}</p>
        </div>
        <ul class="detail_list">
            <li>
                <p class="txt1">发货地</p>
                <div class="padd"> <van-icon name="location-o" size=".4rem" color="#ccc" /></div>
            </li>
            <li>
                <p class="txt1">品牌</p>
            </li>
            <li>
                <p class="txt1">选择</p>
                <span>选择颜色尺码</span>
                <div>
                    <van-icon name="arrow" size=".4rem" @click="show = true" />
                    <van-overlay :show="show" @click="show = false">
                        <div class="wrapper" @click.stop>
                            <div class="block">
                                <div><van-icon name="cross" @click="close" /></div>
                            </div>
                        </div>
                    </van-overlay>
                </div>
            </li>
        </ul>

    </div>
    <div class="shopping flex1">
        <div class="add">加入购物车</div>
        <div class="purchase">立刻购买</div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
let detail = JSON.parse(sessionStorage.getItem('deilDate'))
const show = ref(false);
const router = useRouter()
function close() {
    show.value = !show.value
}
function toback() {
    router.push('/')
}
</script>

<style lang="scss" scoped>
//遮罩层
.wrapper {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.block {
    width: 100%;
    height: 700px;
    background-color: #fff;
}

//返回
.toback {
    position: absolute;
    top: 20px;
    left: 26px;
}

//底部加入购物车
.shopping {
    width: 100%;
    height: 90px;
    position: fixed;
    bottom: 0;
    left: 0;

    div {
        width: 50%;
        height: 100%;
        font-size: 32px;
        line-height: 90px;
        text-align: center;
        color: #fff;
    }

    .add {
        background: #F3CA43;
    }

    .purchase {
        background: #D8182D;
    }
}

.imgs {
    width: 100%;
    height: 710px;

    img {
        width: 100%;
        height: 100%;
    }
}

.detail_con {
    width: 92%;
    margin: 0 auto;
    height: auto;

    span {
        font-size: 24px;
        color: #fff;
        background-color: #d8182d;
        border-radius: 16px;
        display: inline-block;
        height: 30px;
        padding: 4px;
    }
}

.txt {
    font-size: 24px;
    color: #949497;
    padding: 16px 0 0 30px;
}

.sales {
    width: 100%;
    height: auto;
    padding: 30px 0;

    p {
        width: 50%;
        text-align: center;
        font-size: 24px;
        color: #949497;
    }
}


.detail_list {
    width: 94%;
    height: auto;
    margin: 0 auto;

    li {
        width: 100%;
        height: 94px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;

        .txt1 {
            font-size: 28px;
            color: #323233;
        }

        span {
            font-size: 26px;
            color: #949497;
            padding: 0 240px 0 200px;
        }

        .padd {
            padding-left: 40px;
        }
    }
}

.flex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.flex1 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
</style>